<template>
  <!-- 直接使用app-container作为根容器，无需额外包裹 -->
  <div class="app-container wujinghui-dashboard" :class="{ 'dark-theme': isDarkTheme }">
    <!-- 左侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-content">
        <!-- 学生基本信息卡片 -->
        <div class="student-info-card">
          <div class="info-header">
            <h3>个人信息</h3>
            <el-button
              type="primary"
              size="mini"
              @click="startEditingPersonalInfo"
              icon="el-icon-edit"
            >
              编辑
            </el-button>
          </div>

          <!-- 文件输入框用于头像上传 -->
          <input type="file" ref="avatarInput" style="display: none;" accept="image/*" @change="handleAvatarUpload">

          <div class="info-body">
            <div class="info-avatar" @click="triggerAvatarUpload">
              <img v-if="personalInfo.avatar" :src="personalInfo.avatar" class="student-avatar" />
              <div v-else class="avatar-placeholder">
                <i class="el-icon-user"></i>
              </div>
              <div class="avatar-edit-overlay">
                <i class="el-icon-camera"></i>
                <span>更换头像</span>
              </div>
            </div>
            <div class="info-details">
              <div class="info-item">
                <span class="info-label">姓名:</span>
                <span v-if="!isEditingPersonalInfo" class="info-value">{{ personalInfo.name || '吴境辉' }}</span>
                <el-input
                  v-else
                  v-model="editingPersonalInfo.name"
                  size="small"
                  placeholder="请输入姓名"
                  class="edit-input"
                />
              </div>
              <div class="info-item">
                <span class="info-label">学号:</span>
                <span v-if="!isEditingPersonalInfo" class="info-value">{{ personalInfo.studentId || '2022002' }}</span>
                <el-input
                  v-else
                  v-model="editingPersonalInfo.studentId"
                  size="small"
                  placeholder="请输入学号"
                  class="edit-input"
                />
              </div>
              <div class="info-item">
                <span class="info-label">班级:</span>
                <span v-if="!isEditingPersonalInfo" class="info-value">大数据2班</span>
                <el-input
                  v-else
                  v-model="editingPersonalInfo.class"
                  size="small"
                  placeholder="请输入班级"
                  class="edit-input"
                />
              </div>
              <div class="info-item">
                <span class="info-label">入学年份:</span>
                <span v-if="!isEditingPersonalInfo" class="info-value">2022</span>
                <el-input
                  v-else
                  v-model="editingPersonalInfo.year"
                  size="small"
                  placeholder="请输入入学年份"
                  class="edit-input"
                />
              </div>
            </div>
          </div>
          <div v-if="isEditingPersonalInfo" class="info-footer">
            <el-button type="primary" size="mini" @click="savePersonalInfo">保存</el-button>
            <el-button size="mini" @click="cancelEditingPersonalInfo">取消</el-button>
          </div>
        </div>

        <!-- 快速统计 -->
        <div class="quick-stats">
          <div class="stats-item">
            <div class="stats-number">{{ statistics.completedProjects || 5 }}</div>
            <div class="stats-label">完成项目</div>
          </div>
          <div class="stats-item">
            <div class="stats-number">{{ statistics.awardsCount || 3 }}</div>
            <div class="stats-label">获得奖项</div>
          </div>
          <div class="stats-item">
            <div class="stats-number">{{ statistics.skillsCount || 12 }}</div>
            <div class="stats-label">掌握技能</div>
          </div>
        </div>

        <!-- 学习进度 -->
        <div class="learning-progress">
          <h4>学习进度</h4>
          <el-progress
            :percentage="statistics.learningProgress || 75"
            :show-text="true"
            style="margin-bottom: 20px;"
          ></el-progress>

          <!-- 基本信息显示 -->
          <div style="padding: 10px;">
            <p>核心课程完成度: 85%</p>
            <p>实践项目进度: 70%</p>
            <p>技能掌握情况: 90%</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 个性化页面头部 -->
      <div class="custom-header">
        <div class="header-content">
          <div class="header-left">
            <div class="header-logo">
              <div class="logo-circle gradient-bg">
                <i class="el-icon-data-line"></i>
              </div>
            </div>
            <div class="header-text">
              <div class="dashboard-title">
                <span class="title-icon">📊</span>
                <h1>数据分析面板</h1>
              </div>
              <div class="dynamic-status">
                <span class="status-indicator"></span>
                <span>实时数据监控</span>
              </div>
            </div>
          </div>
          <div class="header-right">
            <div class="date-widget modern">
              <div class="date-icon gradient-text"><i class="el-icon-calendar"></i></div>
              <div class="date-info">
                <div class="current-date">{{ currentDate }}</div>
                <div class="greeting">{{ welcomeMessage }}</div>
              </div>
            </div>
            <el-button
              type="primary"
              class="action-button gradient-btn"
              @click="toggleTheme"
              :icon="isDarkTheme ? 'el-icon-lightbulb-on' : 'el-icon-lightbulb-off'"
            >
              {{ isDarkTheme ? '亮色模式' : '暗色模式' }}
            </el-button>
          </div>
        </div>
      </div>

      <!-- 数据概览卡片 -->
    <div class="stats-overview">
      <div class="stats-header">
        <h3 class="section-title">数据概览</h3>
        <el-button
          v-if="!isEditingStatistics"
          type="text"
          class="edit-stats-btn"
          @click="startEditingStatistics"
          icon="el-icon-edit"
        >
          编辑
        </el-button>
      </div>

      <div v-if="!isEditingStatistics" class="stats-cards">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon primary">
            <i class="el-icon-s-flag"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ statistics.completedProjects }}</div>
            <div class="stat-label">已完成项目</div>
          </div>
        </el-card>
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon success">
            <i class="el-icon-medal"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ statistics.awardsCount }}</div>
            <div class="stat-label">获奖次数</div>
          </div>
        </el-card>
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon warning">
            <i class="el-icon-connection"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ statistics.skillsCount }}</div>
            <div class="stat-label">掌握技能</div>
          </div>
        </el-card>
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon info">
            <i class="el-icon-timer"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ statistics.learningProgress }}</div>
            <div class="stat-label">学习进度</div>
          </div>
        </el-card>
      </div>

      <el-form
        v-else
        :model="editingStatistics"
        class="stats-edit-form"
      >
        <div class="stats-edit-grid">
          <el-form-item label="已完成项目" label-width="100px">
            <el-input-number v-model="editingStatistics.completedProjects" :min="0" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label="获奖次数" label-width="100px">
            <el-input-number v-model="editingStatistics.awardsCount" :min="0" :max="50"></el-input-number>
          </el-form-item>
          <el-form-item label="掌握技能" label-width="100px">
            <el-input-number v-model="editingStatistics.skillsCount" :min="0" :max="50"></el-input-number>
          </el-form-item>
          <el-form-item label="学习进度" label-width="100px">
            <el-input-number v-model="editingStatistics.learningProgress" :min="0" :max="100"></el-input-number>
          </el-form-item>
        </div>
        <div class="form-actions">
          <el-button type="primary" @click="saveStatistics">保存</el-button>
          <el-button @click="cancelEditStatistics">取消</el-button>
        </div>
      </el-form>
    </div>

    <!-- 个人资料与活动记录 -->
    <div class="profile-activity-row">
      <!-- 个人资料卡片 -->
      <el-card class="profile-card custom-card">
        <div class="profile-header">
          <h3 class="section-title">个人资料</h3>
          <el-button
            type="text"
            class="edit-profile-btn"
            @click="startEditing"
            icon="el-icon-edit"
          >
            编辑
          </el-button>
        </div>

        <div class="profile-main">
          <!-- 移除多余的头像区域 -->

          <!-- 个人信息 -->
          <div class="profile-details">
            <transition name="fade-transform" mode="out-in">
              <template v-if="!isEditMode">
                <div class="info-group">
                  <div class="info-item">
                    <span class="info-label">姓名：</span>
                    <span class="info-value">{{ personalInfo.name }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">电话：</span>
                    <span class="info-value">{{ personalInfo.phone }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">邮箱：</span>
                    <span class="info-value">{{ personalInfo.email }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">学号：</span>
                    <span class="info-value">{{ personalInfo.studentId }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">专业：</span>
                    <span class="info-value">{{ personalInfo.major }}</span>
                  </div>
                </div>
              </template>

              <el-form
                v-else
                :model="editingPersonalInfo"
                ref="editProfileForm"
                label-width="80px"
                class="profile-edit-form"
              >
                <el-form-item label="姓名">
                  <el-input v-model="editingPersonalInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                  <el-input v-model="editingPersonalInfo.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="editingPersonalInfo.email"></el-input>
                </el-form-item>
                <el-form-item label="学号">
                  <el-input v-model="editingPersonalInfo.studentId"></el-input>
                </el-form-item>
                <el-form-item label="专业">
                  <el-input v-model="editingPersonalInfo.major"></el-input>
                </el-form-item>
                <div class="form-actions">
                  <el-button type="primary" @click="saveProfile">保存</el-button>
                  <el-button @click="cancelEdit">取消</el-button>
                </div>
              </el-form>
            </transition>
          </div>
        </div>
      </el-card>

      <!-- 活动记录 -->
      <el-card class="activity-card custom-card">
        <div class="activity-header">
          <h3 class="section-title">近期活动</h3>
          <div class="activity-actions">
            <el-button
              v-if="!isEditingActivities"
              type="text"
              class="edit-btn"
              @click="startEditingActivities"
              icon="el-icon-edit"
            >
              编辑
            </el-button>
            <el-button
              v-else
              type="text"
              class="add-btn"
              @click="addActivity"
              icon="el-icon-plus"
            >
              添加
            </el-button>
            <el-button
              v-if="!isEditingActivities"
              type="text"
              class="refresh-btn"
              @click="refreshActivities"
              icon="el-icon-refresh"
            >
              刷新
            </el-button>
          </div>
        </div>

        <transition name="fade-transform" mode="out-in">
          <template v-if="!isEditingActivities">
            <div class="activity-list">
              <div v-for="(activity, index) in recentActivities" :key="index" class="activity-item" :data-type="activity.type">
                <div class="activity-icon" :class="getActivityIconClass(activity.type)">
                  <i :class="getActivityIcon(activity.type)"></i>
                </div>
                <div class="activity-content">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-time">{{ formatTime(activity.time) }}</div>
                </div>
              </div>
            </div>
          </template>

          <div v-else class="activity-edit-list">
            <div v-for="(activity, index) in editingActivities" :key="activity.id" class="activity-edit-item">
              <el-form :model="activity" :inline="true" size="small">
                <el-form-item>
                  <el-select v-model="activity.type" placeholder="类型">
                    <el-option label="学术" value="academic"></el-option>
                    <el-option label="项目" value="project"></el-option>
                    <el-option label="奖项" value="award"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="activity.title" placeholder="活动标题" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-date-picker v-model="activity.time" type="date" placeholder="日期" value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="danger" size="small" @click="removeActivity(index)">删除</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="form-actions">
              <el-button type="primary" @click="saveActivities">保存</el-button>
              <el-button @click="cancelEditActivities">取消</el-button>
            </div>
          </div>
        </transition>
      </el-card>
    </div>

    <!-- 项目与技能模块 -->
    <div class="projects-skills-section">
      <!-- 项目展示区 -->
      <el-card class="projects-panel custom-card">
        <div class="panel-header">
          <h3 class="section-title">项目经历</h3>
          <div class="header-actions">
            <el-select v-model="activeProjectType" placeholder="筛选类型">
              <el-option label="全部" value="all"></el-option>
              <el-option label="科研项目" value="research"></el-option>
              <el-option label="实践项目" value="practice"></el-option>
              <el-option label="竞赛项目" value="competition"></el-option>
            </el-select>
            <el-button
              v-if="!isEditingProjects"
              type="text"
              class="edit-btn"
              @click="startEditingProjects"
              icon="el-icon-edit"
            >
              编辑
            </el-button>
            <el-button
              v-else
              type="text"
              class="add-btn"
              @click="addProject"
              icon="el-icon-plus"
            >
              添加
            </el-button>
          </div>
        </div>

        <transition name="fade-transform" mode="out-in">
          <div v-if="!isEditingProjects" class="projects-grid">
            <el-card
              v-for="project in filteredProjects"
              :key="project.id"
              class="project-card"
              :body-style="{ padding: '20px' }"
              :data-type="project.type"
              shadow="hover"
            >
              <div class="project-header">
                <h4 class="project-title">{{ project.title }}</h4>
                <el-tag :type="getProjectTypeTag(project.type)">{{ getProjectTypeText(project.type) }}</el-tag>
              </div>
              <div class="project-meta">
                <span class="project-date">{{ project.startDate }} - {{ project.endDate || '进行中' }}</span>
                <span class="project-role">角色：{{ project.role }}</span>
              </div>
              <div class="project-description">
                {{ project.description }}
              </div>
              <div class="project-tags">
                <el-tag
                  v-for="tag in project.tags"
                  :key="tag"
                  size="small"
                  effect="plain"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </el-card>
          </div>

          <div v-else class="projects-edit-form">
            <div v-for="(project, index) in editingProjects" :key="project.id" class="project-edit-item">
              <el-card shadow="hover">
                <h4>项目 {{ index + 1 }}</h4>
                <el-form :model="project" :inline="false" label-width="100px">
                  <el-form-item label="项目名称">
                    <el-input v-model="project.title"></el-input>
                  </el-form-item>
                  <el-form-item label="项目类型">
                    <el-select v-model="project.type" placeholder="选择类型">
                      <el-option label="科研项目" value="research"></el-option>
                      <el-option label="实践项目" value="practice"></el-option>
                      <el-option label="竞赛项目" value="competition"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="开始日期">
                    <el-date-picker v-model="project.startDate" type="date" value-format="YYYY-MM-DD"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束日期">
                    <el-date-picker v-model="project.endDate" type="date" value-format="YYYY-MM-DD" placeholder="未结束可不填"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="担任角色">
                    <el-input v-model="project.role"></el-input>
                  </el-form-item>
                  <el-form-item label="项目描述">
                    <el-input v-model="project.description" type="textarea" :rows="3"></el-input>
                  </el-form-item>
                  <el-form-item label="标签">
                    <div class="tag-input-container">
                      <el-tag
                        v-for="(tag, tagIndex) in project.tags"
                        :key="tagIndex"
                        closable
                        @close="removeProjectTag(index, tagIndex)"
                      >
                        {{ tag }}
                      </el-tag>
                      <input
                        v-model="newTag"
                        @keyup.enter="addProjectTag(index)"
                        type="text"
                        placeholder="按回车添加标签"
                        class="tag-input"
                      >
                      <el-button type="text" @click="addProjectTag(index)">添加</el-button>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="danger" @click="removeProject(index)">删除项目</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
            <div class="form-actions">
              <el-button type="primary" @click="saveProjects">保存</el-button>
              <el-button @click="cancelEditProjects">取消</el-button>
            </div>
          </div>
        </transition>
      </el-card>

      <!-- 技能展示区 -->
      <el-card class="skills-panel custom-card">
        <div class="panel-header">
          <h3 class="section-title">专业技能</h3>
          <div class="header-actions">
            <el-select v-model="activeSkillCategory" placeholder="筛选类别">
              <el-option label="全部" value="all"></el-option>
              <el-option label="编程语言" value="编程语言"></el-option>
              <el-option label="框架技术" value="框架技术"></el-option>
              <el-option label="数据库" value="数据库"></el-option>
              <el-option label="开发工具" value="开发工具"></el-option>
            </el-select>
            <el-button
              v-if="!isEditingSkills"
              type="text"
              class="edit-btn"
              @click="startEditingSkills"
              icon="el-icon-edit"
            >
              编辑
            </el-button>
            <el-button
              v-else
              type="text"
              class="add-btn"
              @click="addSkill"
              icon="el-icon-plus"
            >
              添加
            </el-button>
          </div>
        </div>

        <transition name="fade-transform" mode="out-in">
          <div v-if="!isEditingSkills" class="skills-grid">
            <div
              v-for="skill in filteredSkills"
              :key="skill.name"
              class="skill-item"
            >
              <div class="skill-header">
                <h4 class="skill-name">{{ skill.name }}</h4>
                <el-tag size="small">{{ skill.category }}</el-tag>
              </div>
              <el-progress
                :percentage="skill.level"
                :color="customProgressColor"
                :show-text="false"
                class="skill-progress"
              ></el-progress>
              <div class="skill-level">{{ getSkillLevelText(skill.level) }}</div>
              <div class="skill-tags">
                <el-tag
                  v-for="tag in skill.tags"
                  :key="tag"
                  size="small"
                  effect="plain"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>
          </div>

          <div v-else class="skills-edit-form">
            <div v-for="(skill, index) in editingSkills" :key="skill.name + index" class="skill-edit-item">
              <el-card shadow="hover">
                <h4>技能 {{ index + 1 }}</h4>
                <el-form :model="skill" :inline="false" label-width="100px">
                  <el-form-item label="技能名称">
                    <el-input v-model="skill.name"></el-input>
                  </el-form-item>
                  <el-form-item label="技能类别">
                    <el-select v-model="skill.category" placeholder="选择类别">
                      <el-option label="编程语言" value="编程语言"></el-option>
                      <el-option label="框架技术" value="框架技术"></el-option>
                      <el-option label="数据库" value="数据库"></el-option>
                      <el-option label="开发工具" value="开发工具"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="熟练程度">
                    <div class="skill-level-slider">
                      <el-slider
                        v-model="skill.level"
                        :min="0"
                        :max="100"
                        :marks="{ 0: '入门', 30: '基础', 60: '熟练', 90: '精通' }"
                      ></el-slider>
                      <div class="skill-level-value">{{ skill.level }}%</div>
                    </div>
                  </el-form-item>
                  <el-form-item label="标签">
                    <div class="skill-tags-edit">
                      <el-tag
                        v-for="(tag, tagIndex) in skill.tags"
                        :key="tagIndex"
                        closable
                        @close="removeSkillTag(index, tagIndex)"
                      >
                        {{ tag }}
                      </el-tag>
                      <input
                        v-model="newSkillTag"
                        @keyup.enter="addSkillTag(index)"
                        type="text"
                        placeholder="按回车添加标签"
                        class="tag-input"
                      >
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="danger" @click="removeSkill(index)">删除技能</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
            <div class="form-actions">
              <el-button type="primary" @click="saveSkills">保存</el-button>
              <el-button @click="cancelEditSkills">取消</el-button>
            </div>
          </div>
        </transition>
      </el-card>
    </div>

    <!-- 成就展示区 -->
    <el-card class="achievements-panel custom-card">
      <div class="panel-header">
        <h3 class="section-title">获奖成就</h3>
        <div class="header-actions">
          <el-button
            v-if="!isEditingAchievements"
            type="text"
            class="edit-btn"
            @click="startEditingAchievements"
            icon="el-icon-edit"
          >
            编辑
          </el-button>
          <el-button
            v-else
            type="text"
            class="add-btn"
            @click="addAchievement"
            icon="el-icon-plus"
          >
            添加
          </el-button>
        </div>
      </div>

      <transition name="fade-transform" mode="out-in">
        <div v-if="!isEditingAchievements" class="achievements-grid">
          <div
            v-for="achievement in achievements"
            :key="achievement.title"
            class="achievement-item"
          >
            <div class="achievement-icon" :class="achievement.iconClass">
              <i :class="achievement.icon"></i>
            </div>
            <div class="achievement-content">
              <div class="achievement-header">
                <h4 class="achievement-title">{{ achievement.title }}</h4>
                <span class="achievement-date">{{ achievement.date }}</span>
              </div>
              <div class="achievement-detail">{{ achievement.detail }}</div>
            </div>
          </div>
        </div>

        <div v-else class="achievements-edit-form">
          <div v-for="(achievement, index) in editingAchievements" :key="achievement.title + index" class="achievement-edit-item">
            <el-card shadow="hover">
              <h4>成就 {{ index + 1 }}</h4>
              <el-form :model="achievement" :inline="false" label-width="100px">
                <el-form-item label="获奖名称">
                  <el-input v-model="achievement.title"></el-input>
                </el-form-item>
                <el-form-item label="获奖日期">
                  <el-date-picker v-model="achievement.date" type="date" value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item label="获奖详情">
                  <el-input v-model="achievement.detail" type="textarea" :rows="3"></el-input>
                </el-form-item>
                <el-form-item label="图标类型">
                  <el-radio-group v-model="achievement.iconClass">
                    <el-radio value="gold-icon">金色</el-radio>
                    <el-radio value="silver-icon">银色</el-radio>
                    <el-radio value="bronze-icon">铜色</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="danger" @click="removeAchievement(index)">删除成就</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
          <div class="form-actions">
            <el-button type="primary" @click="saveAchievements">保存</el-button>
            <el-button @click="cancelEditAchievements">取消</el-button>
          </div>
        </div>
      </transition>
    </el-card>

    <!-- 编辑状态提示 -->
    <div v-if="isEditMode || isEditingActivities || isEditingProjects || isEditingSkills || isEditingAchievements || isEditingStatistics" class="edit-status">
      <i class="el-icon-edit"></i>
      <span>编辑模式 - 请确保保存所有更改</span>
    </div>
  </div>
</div>
</template>

<script>
import { updateUserProfile } from "@/api/system/user"

export default {
  data() {
    return {
      // 主题状态
      isDarkTheme: false,

      // 当前日期和问候语
      currentDate: '',
      welcomeMessage: '',

      // 个人信息
      personalInfo: {
        name: '吴境辉',
        phone: '138****1234',
        email: 'wujinghui@example.com',
        studentId: '2022002',
        class: '大数据2班',
        year: '2022',
        major: '计算机科学与技术 - 大数据方向',
        avatar: ''
      },

      // 侧边栏个人信息编辑状态
      isEditingPersonalInfo: false,
      editingPersonalInfo: {},

      // 其他编辑状态
      isEditMode: false,

      // 数据概览
      statistics: {
        completedProjects: 5,
        awardsCount: 3,
        skillsCount: 12,
        learningProgress: 75
      },
      isEditingStatistics: false,
      editingStatistics: {},

      // 最近活动
      recentActivities: [
        { title: '参加大数据分析竞赛', time: '2023-11-15', type: 'academic' },
        { title: '完成数据挖掘项目', time: '2023-11-10', type: 'project' },
        { title: '获得校级优秀学生称号', time: '2023-10-28', type: 'award' },
        { title: '学习机器学习新算法', time: '2023-10-20', type: 'academic' }
      ],
      isEditingActivities: false,
      editingActivities: [],

      // 项目经历
      projects: [
        {
          id: 1,
          title: '校园大数据分析平台开发',
          type: 'practice',
          startDate: '2023-09-01',
          endDate: '2023-11-15',
          role: '前端开发',
          description: '开发校园数据可视化平台，负责前端界面设计和数据展示',
          tags: ['Vue', 'ECharts', '数据可视化']
        },
        {
          id: 2,
          title: '学生成绩预测模型研究',
          type: 'research',
          startDate: '2023-07-10',
          endDate: '2023-08-20',
          role: '核心成员',
          description: '基于机器学习算法构建学生成绩预测模型，提高预测准确率',
          tags: ['机器学习', 'Python', '数据挖掘']
        },
        {
          id: 3,
          title: '全国大学生大数据竞赛',
          type: 'competition',
          startDate: '2023-05-15',
          endDate: '2023-06-30',
          role: '队长',
          description: '带领团队参加全国大数据竞赛，获得三等奖',
          tags: ['团队协作', '数据分析', '竞赛']
        }
      ],
      isEditingProjects: false,
      editingProjects: [],
      activeProjectType: 'all',
      newTag: '',

      // 专业技能
      skills: [
        {
          name: 'Python',
          level: 85,
          category: '编程语言',
          tags: ['数据分析', '机器学习']
        },
        {
          name: 'Java',
          level: 70,
          category: '编程语言',
          tags: ['后端开发']
        },
        {
          name: 'Vue.js',
          level: 75,
          category: '框架技术',
          tags: ['前端框架', '响应式']
        },
        {
          name: 'MySQL',
          level: 65,
          category: '数据库',
          tags: ['关系型', 'SQL']
        },
        {
          name: 'TensorFlow',
          level: 60,
          category: '框架技术',
          tags: ['深度学习', 'AI']
        },
        {
          name: 'Hadoop',
          level: 55,
          category: '框架技术',
          tags: ['大数据', '分布式']
        }
      ],
      isEditingSkills: false,
      editingSkills: [],
      activeSkillCategory: 'all',
      newSkillTag: '',

      // 获奖成就
      achievements: [
        {
          title: '全国大数据竞赛三等奖',
          detail: '2023年全国大学生大数据应用创新大赛',
          date: '2023-06-30',
          icon: 'el-icon-cup',
          iconClass: 'gold-icon'
        },
        {
          title: '校级优秀学生',
          detail: '2022-2023学年校级优秀学生称号',
          date: '2023-10-28',
          icon: 'el-icon-medal',
          iconClass: 'silver-icon'
        },
        {
          title: '编程竞赛一等奖',
          detail: '校级程序设计竞赛一等奖',
          date: '2023-04-15',
          icon: 'el-icon-trophy',
          iconClass: 'bronze-icon'
        }
      ],
      isEditingAchievements: false,
      editingAchievements: []
    }
  },

  computed: {
    // 筛选后的项目列表
    filteredProjects() {
      if (this.activeProjectType === 'all') {
        return this.projects
      }
      return this.projects.filter(project => project.type === this.activeProjectType)
    },

    // 筛选后的技能列表
    filteredSkills() {
      if (this.activeSkillCategory === 'all') {
        return this.skills
      }
      return this.skills.filter(skill => skill.category === this.activeSkillCategory)
    },

    // 自定义进度条颜色
    customProgressColor() {
      return {
        '0%': '#667eea',
        '100%': '#764ba2'
      }
    }
  },

  mounted() {
    // 初始化日期和问候语
    this.updateDateAndGreeting()
    setInterval(() => this.updateDateAndGreeting(), 60000) // 每分钟更新一次

    // 从本地存储加载主题设置
    const savedTheme = localStorage.getItem('dashboardTheme')
    if (savedTheme) {
      this.isDarkTheme = savedTheme === 'dark'
    }

    // 从本地存储加载头像数据
    const savedAvatar = localStorage.getItem('wujinghuiAvatar');
    if (savedAvatar && this.personalInfo) {
      this.personalInfo.avatar = savedAvatar;
    }

    // 从本地存储加载个人信息
    const savedPersonalInfo = localStorage.getItem('wujinghuiPersonalInfo');
    if (savedPersonalInfo) {
      try {
        this.personalInfo = JSON.parse(savedPersonalInfo);
      } catch (e) {
        console.error('加载个人信息失败:', e);
      }
    }

    // 从本地存储加载统计数据
    const savedStatistics = localStorage.getItem('wujinghuiStatistics');
    if (savedStatistics) {
      try {
        this.statistics = JSON.parse(savedStatistics);
      } catch (e) {
        console.error('加载统计数据失败:', e);
      }
    }

    // 从本地存储加载活动数据
    const savedActivities = localStorage.getItem('wujinghuiActivities');
    if (savedActivities) {
      try {
        this.recentActivities = JSON.parse(savedActivities);
      } catch (e) {
        console.error('加载活动数据失败:', e);
      }
    }

    // 从本地存储加载项目数据
    const savedProjects = localStorage.getItem('wujinghuiProjects');
    if (savedProjects) {
      try {
        this.projects = JSON.parse(savedProjects);
      } catch (e) {
        console.error('加载项目数据失败:', e);
      }
    }

    // 从本地存储加载技能数据
    const savedSkills = localStorage.getItem('wujinghuiSkills');
    if (savedSkills) {
      try {
        this.skills = JSON.parse(savedSkills);
      } catch (e) {
        console.error('加载技能数据失败:', e);
      }
    }

    // 从本地存储加载成就数据
    const savedAchievements = localStorage.getItem('wujinghuiAchievements');
    if (savedAchievements) {
      try {
        this.achievements = JSON.parse(savedAchievements);
      } catch (e) {
        console.error('加载成就数据失败:', e);
      }
    }

    // 初始化编辑数据 - 仅在需要时才进行深拷贝，避免页面加载时的性能开销
    // 编辑数据将在编辑模式开始时初始化
  },

  methods: {
    // 开始编辑个人信息
    startEditingPersonalInfo() {
      this.isEditingPersonalInfo = true;
      // 仅在开始编辑时创建编辑对象
      this.editingPersonalInfo = {
        name: this.personalInfo.name,
        studentId: this.personalInfo.studentId,
        class: this.personalInfo.class || '大数据1班',
        year: this.personalInfo.year || '2021'
      };
    },

    // 保存个人信息
    savePersonalInfo() {
      // 更新个人信息
      this.personalInfo = {
        ...this.personalInfo,
        ...this.editingPersonalInfo
      };

      // 准备提交到后端的数据格式
      const userData = {
        nickName: this.personalInfo.name,
        phonenumber: this.personalInfo.phone,
        email: this.personalInfo.email
      }

      // 调用后端API保存数据
      updateUserProfile(userData).then(response => {
        if (response.success) {
          this.isEditingPersonalInfo = false;
          this.$message.success('个人信息保存成功');
        } else {
          this.$message.error('保存失败：' + (response.msg || '未知错误'))
        }
      }).catch(error => {
        console.error('保存失败：', error)
        this.$message.error('网络错误，请稍后重试')
      })
    },

    // 取消编辑个人信息
    cancelEditingPersonalInfo() {
      this.isEditingPersonalInfo = false;
      this.editingPersonalInfo = {};
    },
    // 更新日期和问候语
    updateDateAndGreeting() {
      const now = new Date()
      const hours = now.getHours()

      // 设置问候语
      if (hours < 6) {
        this.welcomeMessage = '夜深了，注意休息'
      } else if (hours < 12) {
        this.welcomeMessage = '早上好，新的一天加油！'
      } else if (hours < 14) {
        this.welcomeMessage = '中午好，准备午休了吗？'
      } else if (hours < 18) {
        this.welcomeMessage = '下午好，工作顺利！'
      } else if (hours < 22) {
        this.welcomeMessage = '晚上好，今天过得如何？'
      } else {
        this.welcomeMessage = '夜深了，早点休息吧'
      }

      // 设置日期
      const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }
      this.currentDate = now.toLocaleDateString('zh-CN', options)
    },

    // 切换主题
    toggleTheme() {
      this.isDarkTheme = !this.isDarkTheme
      localStorage.setItem('dashboardTheme', this.isDarkTheme ? 'dark' : 'light')
    },

    // 个人资料编辑相关
    startEditing() {
      this.isEditMode = true
      // 仅在开始编辑时进行深拷贝
      this.editingPersonalInfo = JSON.parse(JSON.stringify(this.personalInfo))
    },

    saveProfile() {
      // 更新本地数据
      this.personalInfo = JSON.parse(JSON.stringify(this.editingPersonalInfo))

      // 保存到本地存储实现持久化
      localStorage.setItem('wujinghuiPersonalInfo', JSON.stringify(this.personalInfo))

      // 准备提交到后端的数据格式
      const userData = {
        nickName: this.personalInfo.name,
        phonenumber: this.personalInfo.phone,
        email: this.personalInfo.email
      }

      // 调用后端API保存数据
      updateUserProfile(userData).then(response => {
        if (response.success) {
          this.isEditMode = false
          this.$message.success('个人资料更新成功')
        } else {
          this.$message.error('保存失败：' + (response.msg || '未知错误'))
        }
      }).catch(error => {
        console.error('保存失败：', error)
        this.$message.error('网络错误，请稍后重试')
      })
    },

    cancelEdit() {
      this.editingPersonalInfo = JSON.parse(JSON.stringify(this.personalInfo))
      this.isEditMode = false
    },

    // 头像上传相关
    triggerAvatarUpload() {
      // 无论是否在编辑模式，都允许上传头像
      this.$refs.avatarInput.click()
    },

    handleAvatarUpload(event) {
      const file = event.target.files[0]
      if (file) {
        // 验证文件类型
        const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
        if (!validTypes.includes(file.type)) {
          this.$message.error('请上传JPG、PNG或GIF格式的图片')
          event.target.value = ''
          return
        }

        // 验证文件大小（不超过2MB）
        if (file.size > 2 * 1024 * 1024) {
          this.$message.error('图片大小不能超过2MB')
          event.target.value = ''
          return
        }

        // 显示上传中的提示
        this.$message.success('头像上传中...')

        // 读取并预览图片
        const reader = new FileReader()
        reader.onload = (e) => {
          // 直接更新个人信息
          this.personalInfo.avatar = e.target.result

          // 确保editingPersonalInfo已初始化
          if (!this.editingPersonalInfo) {
            this.editingPersonalInfo = {}
          }
          this.editingPersonalInfo.avatar = e.target.result

          // 保存头像到本地存储实现持久化
          localStorage.setItem('wujinghuiAvatar', e.target.result);

          // 显示成功提示
          this.$message.success('头像上传成功')

          // 清空input值
          event.target.value = ''
        }
        reader.onerror = () => {
          this.$message.error('头像上传失败，请重试')
          event.target.value = ''
        }
        reader.readAsDataURL(file)
      }
      // 确保无论如何都清空input值
      event.target.value = ''

      // 清空input，允许重复选择同一文件
      event.target.value = ''
    },

    // 统计数据编辑相关
    startEditingStatistics() {
      this.isEditingStatistics = true
      // 仅在开始编辑时进行深拷贝
      this.editingStatistics = JSON.parse(JSON.stringify(this.statistics))
    },

    saveStatistics() {
      // 更新本地数据
      this.statistics = JSON.parse(JSON.stringify(this.editingStatistics))

      // 保存到本地存储实现持久化
      localStorage.setItem('wujinghuiStatistics', JSON.stringify(this.statistics))

      this.isEditingStatistics = false
      this.$message.success('统计数据更新成功')
    },

    cancelEditStatistics() {
      this.editingStatistics = JSON.parse(JSON.stringify(this.statistics))
      this.isEditingStatistics = false
    },

    // 活动记录相关
    getActivityIcon(type) {
      const iconMap = {
        academic: 'el-icon-reading',
        project: 'el-icon-s-order',
        award: 'el-icon-medal'
      }
      return iconMap[type] || 'el-icon-question'
    },

    getActivityIconClass(type) {
      const classMap = {
        academic: 'academic-icon',
        project: 'project-icon',
        award: 'award-icon'
      }
      return classMap[type] || 'default-icon'
    },

    formatTime(time) {
      return time
    },

    refreshActivities() {
      this.$message.success('活动记录已刷新')
    },

    startEditingActivities() {
      this.isEditingActivities = true
      // 仅在开始编辑时进行深拷贝
      this.editingActivities = JSON.parse(JSON.stringify(this.recentActivities))
    },

    saveActivities() {
      // 更新本地数据
      this.recentActivities = JSON.parse(JSON.stringify(this.editingActivities))

      // 保存到本地存储实现持久化
      localStorage.setItem('wujinghuiActivities', JSON.stringify(this.recentActivities))

      this.isEditingActivities = false
      this.$message.success('活动记录更新成功')
    },

    cancelEditActivities() {
      this.editingActivities = JSON.parse(JSON.stringify(this.recentActivities))
      this.isEditingActivities = false
    },

    addActivity() {
      this.editingActivities.push({
        id: Date.now(),
        title: '',
        time: '',
        type: 'academic'
      })
    },

    removeActivity(index) {
      this.editingActivities.splice(index, 1)
    },

    // 项目相关
    getProjectTypeText(type) {
      const typeMap = {
        research: '科研项目',
        practice: '实践项目',
        competition: '竞赛项目'
      }
      return typeMap[type] || '未知类型'
    },

    getProjectTypeTag(type) {
      const tagMap = {
        research: 'info',
        practice: 'success',
        competition: 'warning'
      }
      return tagMap[type] || 'primary'
    },

    startEditingProjects() {
      this.isEditingProjects = true
      // 仅在开始编辑时进行深拷贝
      this.editingProjects = JSON.parse(JSON.stringify(this.projects))
    },

    saveProjects() {
      // 更新本地数据
      this.projects = JSON.parse(JSON.stringify(this.editingProjects))

      // 保存到本地存储实现持久化
      localStorage.setItem('wujinghuiProjects', JSON.stringify(this.projects))

      this.isEditingProjects = false
      this.$message.success('项目信息更新成功')
    },

    cancelEditProjects() {
      this.editingProjects = JSON.parse(JSON.stringify(this.projects))
      this.isEditingProjects = false
    },

    addProject() {
      this.editingProjects.push({
        id: Date.now(),
        title: '',
        type: 'practice',
        startDate: '',
        endDate: '',
        role: '',
        description: '',
        tags: []
      })
    },

    removeProject(index) {
      this.editingProjects.splice(index, 1)
    },

    addProjectTag(projectIndex) {
      if (this.newTag && !this.editingProjects[projectIndex].tags.includes(this.newTag)) {
        this.editingProjects[projectIndex].tags.push(this.newTag)
        this.newTag = ''
      }
    },

    removeProjectTag(projectIndex, tagIndex) {
      this.editingProjects[projectIndex].tags.splice(tagIndex, 1)
    },

    // 技能相关
    getSkillLevelText(level) {
      if (level >= 90) return '精通'
      if (level >= 70) return '熟练'
      if (level >= 50) return '良好'
      if (level >= 30) return '基础'
      return '入门'
    },

    startEditingSkills() {
      this.isEditingSkills = true
      // 仅在开始编辑时进行深拷贝
      this.editingSkills = JSON.parse(JSON.stringify(this.skills))
    },

    saveSkills() {
      // 更新本地数据
      this.skills = JSON.parse(JSON.stringify(this.editingSkills))

      // 保存到本地存储实现持久化
      localStorage.setItem('wujinghuiSkills', JSON.stringify(this.skills))

      this.isEditingSkills = false
      this.$message.success('技能信息更新成功')
    },

    cancelEditSkills() {
      this.editingSkills = JSON.parse(JSON.stringify(this.skills))
      this.isEditingSkills = false
    },

    addSkill() {
      this.editingSkills.push({
        name: '',
        level: 60,
        category: '编程语言',
        tags: []
      })
    },

    removeSkill(index) {
      this.editingSkills.splice(index, 1)
    },

    addSkillTag(index) {
      if (!this.editingSkills[index].tags) {
        this.editingSkills[index].tags = []
      }
      if (this.newSkillTag && !this.editingSkills[index].tags.includes(this.newSkillTag)) {
        this.editingSkills[index].tags.push(this.newSkillTag)
        this.newSkillTag = ''
      }
    },

    removeSkillTag(skillIndex, tagIndex) {
      this.editingSkills[skillIndex].tags.splice(tagIndex, 1)
    },

    // 成就相关
    startEditingAchievements() {
      this.isEditingAchievements = true
      // 仅在开始编辑时进行深拷贝
      this.editingAchievements = JSON.parse(JSON.stringify(this.achievements))
    },

    saveAchievements() {
      // 更新本地数据
      this.achievements = JSON.parse(JSON.stringify(this.editingAchievements))

      // 保存到本地存储实现持久化
      localStorage.setItem('wujinghuiAchievements', JSON.stringify(this.achievements))

      this.isEditingAchievements = false
      this.$message.success('成就信息更新成功')
    },

    cancelEditAchievements() {
      this.editingAchievements = JSON.parse(JSON.stringify(this.achievements))
      this.isEditingAchievements = false
    },

    addAchievement() {
      this.editingAchievements.push({
        title: '',
        detail: '',
        date: '',
        icon: 'el-icon-cup',
        iconClass: 'gold-icon'
      })
    },

    removeAchievement(index) {
      this.editingAchievements.splice(index, 1)
    }
  }
}
</script>

<style>
  /* 全局样式 - 直接覆盖整个页面背景 */
  body {
    background: white !important;
    overflow: auto;
  }

  /* 覆盖所有可能的紫色背景元素 */
  .sidebar,
  .el-container,
  .el-aside {
    background: white !important;
  }

  /* 全屏白色背景 - 完全覆盖左侧紫色区域 */
  .app-container {
    background: white;
  }

  /* 确保侧边栏也显示为白色 */
  .sidebar {
    background: white !important;
  }
/* 页面主容器 */
.wujinghui-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  padding: 0;
  transition: all 0.3s ease;
  display: flex;
  gap: 0;
}

/* 左侧边栏 */
.sidebar {
  width: 300px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 学生信息卡片 */
.student-info-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.wujinghui-dashboard.dark-theme .student-info-card {
  background: rgba(30, 30, 47, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.info-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.wujinghui-dashboard.dark-theme .info-header h3 {
  color: #e0e0e0;
}

.info-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.info-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 32px;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 0;
  margin: 0;
}

.info-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.avatar-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
}

.info-avatar:hover .avatar-edit-overlay {
  opacity: 1;
}

.avatar-edit-overlay i {
  font-size: 18px;
  margin-bottom: 4px;
}

.avatar-edit-overlay span {
  font-size: 12px;
  font-weight: 500;
}

.student-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 0;
  margin: 0;
  border: none;
}

.avatar-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
}

.avatar-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.info-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.edit-input {
  width: 120px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.info-label {
  font-weight: 500;
  color: #666;
}

.info-value {
  font-weight: 600;
  color: #333;
}

.wujinghui-dashboard.dark-theme .info-label {
  color: #a0a0a0;
}

.wujinghui-dashboard.dark-theme .info-value {
  color: #e0e0e0;
}

/* 快速统计 */
.quick-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.wujinghui-dashboard.dark-theme .stats-item {
  background: rgba(30, 30, 47, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.stats-number {
  font-size: 24px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 4px;
}

.stats-label {
  font-size: 14px;
  color: #666;
}

.wujinghui-dashboard.dark-theme .stats-label {
  color: #a0a0a0;
}

/* 学习进度 */
.learning-progress {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.wujinghui-dashboard.dark-theme .learning-progress {
  background-color: #303050;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.learning-progress h4 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 700;
  color: #667eea;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wujinghui-dashboard.dark-theme .learning-progress h4 {
  color: #8E2DE2;
}

/* 自定义进度条样式 */
.learning-progress .el-progress {
  margin-bottom: 24px;
}

.learning-progress .el-progress-bar__outer {
  background-color: #e0e7ff;
  border-radius: 8px;
}

.learning-progress .el-progress-bar__inner {
  background-color: #667eea;
  border-radius: 8px;
}

.wujinghui-dashboard.dark-theme .learning-progress .el-progress-bar__outer {
  background-color: #4a4a6a;
}

.wujinghui-dashboard.dark-theme .learning-progress .el-progress-bar__inner {
  background-color: #8E2DE2;
}

/* 学习进度详情 */
.learning-progress p {
  margin: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: #555;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.learning-progress p::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.3), transparent);
}

.learning-progress p:last-child::after {
  display: none;
}

.learning-progress p span {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.wujinghui-dashboard.dark-theme .learning-progress p {
  color: #e0e0e0;
}

.wujinghui-dashboard.dark-theme .learning-progress p::after {
  background: linear-gradient(90deg, rgba(142, 45, 226, 0.3), transparent);
}

.wujinghui-dashboard.dark-theme .learning-progress p span {
  background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  overflow-y: auto;
}

/* 内容容器 - 无限制宽度 */
.content-container {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 基础主题背景 */
.wujinghui-dashboard {
  background-color: #f5f7fa;
  color: #333;
}

/* 深色模式背景 */
.wujinghui-dashboard.dark-theme {
  background-color: #1e1e2f;
  color: #e0e0e0;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 自定义头部 */
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wujinghui-dashboard.dark-theme .custom-header {
  background-color: #303050;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 渐变背景样式 */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transition: all 0.3s ease;
}

.gradient-bg:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* 标题样式 */
.dashboard-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.title-icon {
  font-size: 24px;
}

.dashboard-title h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #667eea;
}

.wujinghui-dashboard.dark-theme .dashboard-title h1 {
  color: #8E2DE2;
}

/* 动态状态指示器 */
.dynamic-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #67c23a;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #67c23a;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* 现代化日期部件 */
.date-widget.modern {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.wujinghui-dashboard.dark-theme .date-widget.modern {
  background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);
}

.date-widget.modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wujinghui-dashboard.dark-theme .date-widget.modern:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 18px;
}

.wujinghui-dashboard.dark-theme .gradient-text {
  background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Logo区域 */
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #667eea;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  overflow: hidden;
}

.header-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.header-text h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #666;
}

.wujinghui-dashboard.dark-theme .header-text h1 {
  color: #e0e0e0;
}

.wujinghui-dashboard.dark-theme .header-text p {
  color: #a0a0a0;
}

/* 右侧信息 */
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.date-widget {
  display: flex;
  align-items: center;
  gap: 12px;
}

.date-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #667eea;
  font-size: 18px;
}

.wujinghui-dashboard.dark-theme .date-icon {
  background: rgba(102, 126, 234, 0.2);
}

.date-info {
  display: flex;
  flex-direction: column;
}

.current-date {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.greeting {
  font-size: 14px;
  color: #666;
}

.wujinghui-dashboard.dark-theme .current-date {
  color: #e0e0e0;
}

.wujinghui-dashboard.dark-theme .greeting {
  color: #a0a0a0;
}

.action-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

/* 数据概览 - 简化且多彩的视觉效果 */
.stats-overview {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e0e0e0;
}

.wujinghui-dashboard.dark-theme .stats-overview {
  background-color: #303050;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid #4a4a6a;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #667eea;
}

.wujinghui-dashboard.dark-theme .section-title {
  color: #8E2DE2;
}

.edit-stats-btn, .edit-profile-btn, .edit-btn {
  color: #667eea;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 6px;
}

.edit-stats-btn:hover, .edit-profile-btn:hover, .edit-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #764ba2;
  transform: translateY(-1px);
}

.wujinghui-dashboard.dark-theme .edit-stats-btn,
.wujinghui-dashboard.dark-theme .edit-profile-btn,
.wujinghui-dashboard.dark-theme .edit-btn {
  color: #8ea3e9;
}

.wujinghui-dashboard.dark-theme .edit-stats-btn:hover,
.wujinghui-dashboard.dark-theme .edit-profile-btn:hover,
.wujinghui-dashboard.dark-theme .edit-btn:hover {
  background: rgba(142, 45, 226, 0.2);
  color: #b085f5;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* 多彩的统计卡片 */
.stat-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  padding: 20px;
  position: relative;
  background: white;
  border-left: 4px solid #667eea;
}

/* 为不同的卡片设置不同的左侧边框颜色和背景色 */
.stat-card:nth-child(1) {
  border-left-color: #667eea;
  background-color: #f8f9ff;
}

.stat-card:nth-child(2) {
  border-left-color: #48bb78;
  background-color: #f0fff4;
}

.stat-card:nth-child(3) {
  border-left-color: #ed8936;
  background-color: #fff8e1;
}

.stat-card:nth-child(4) {
  border-left-color: #3182ce;
  background-color: #e3f2fd;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 深色模式下的卡片样式 */
.wujinghui-dashboard.dark-theme .stat-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wujinghui-dashboard.dark-theme .stat-card:nth-child(1) {
  background-color: rgba(102, 126, 234, 0.15);
  border-left-color: #667eea;
}

.wujinghui-dashboard.dark-theme .stat-card:nth-child(2) {
  background-color: rgba(72, 187, 120, 0.15);
  border-left-color: #48bb78;
}

.wujinghui-dashboard.dark-theme .stat-card:nth-child(3) {
  background-color: rgba(237, 137, 54, 0.15);
  border-left-color: #ed8936;
}

.wujinghui-dashboard.dark-theme .stat-card:nth-child(4) {
  background-color: rgba(49, 130, 206, 0.15);
  border-left-color: #3182ce;
}

.stat-card >>> .el-card__body {
  padding: 20px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  margin-bottom: 16px;
}

.stat-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.stat-icon.info {
  background: linear-gradient(135deg, #17a2b8 0%, #31c6d4 100%);
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.wujinghui-dashboard.dark-theme .stat-value {
  color: #e0e0e0;
}

.wujinghui-dashboard.dark-theme .stat-label {
  color: #a0a0a0;
}

/* 编辑表单样式 */
.stats-edit-form, .profile-edit-form {
  padding: 20px 0;
}

.stats-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* 个人资料与活动记录行 */
.profile-activity-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* 自定义卡片 */
.custom-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.95);
  transition: all 0.3s ease;
}

.wujinghui-dashboard.dark-theme .custom-card {
  background: rgba(30, 30, 47, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.custom-card >>> .el-card__body {
  padding: 24px;
}

/* 个人资料卡片 */
.profile-card {
  min-height: 350px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wujinghui-dashboard.dark-theme .profile-card {
  background-color: #303050;
  border: 1px solid #4a4a6a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.profile-main {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.profile-avatar-section {
  flex-shrink: 0;
}

/* 头像样式 */
.avatar-wrapper {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #ffffff;
}

.wujinghui-dashboard.dark-theme .avatar-wrapper {
  border: 2px solid #4a4a6a;
  background-color: #4a4a6a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.avatar-wrapper.edit-mode {
  border: 2px dashed #667eea;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    padding: 4px;
    font-size: 12px;
  }

  .profile-details {
    flex: 1;
  }

  .info-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .info-label {
    font-size: 14px;
    color: #666;
    min-width: 60px;
    font-weight: 500;
  }

  .wujinghui-dashboard.dark-theme .info-label {
    color: #a0a0a0;
  }

  .info-value {
    font-size: 14px;
    color: #333;
    flex: 1;
  }

  .wujinghui-dashboard.dark-theme .info-value {
    color: #e0e0e0;
  }

  /* 活动卡片 */
  .activity-card {
    min-height: 350px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    background: white;
  }

  .wujinghui-dashboard.dark-theme .activity-card {
    border-color: #4a4a6a;
    background: rgba(30, 30, 47, 0.95);
  }

  .activity-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  .activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 4px;
  }

  .activity-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .refresh-btn {
    color: #667eea;
    transition: all 0.3s ease;
    font-size: 18px;
  }

  .refresh-btn:hover {
    color: #764ba2;
    transform: rotate(180deg);
  }

  .wujinghui-dashboard.dark-theme .refresh-btn {
    color: #8ea3e9;
  }

  .wujinghui-dashboard.dark-theme .refresh-btn:hover {
    color: #a586ce;
  }

  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* 为不同类型的活动设置不同的背景色和样式 */
  .activity-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border-left: 5px solid #667eea;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .activity-item[data-type="academic"] {
    background-color: #f8f9ff;
    border-left-color: #667eea;
  }

  .activity-item[data-type="project"] {
    background-color: #f0fff4;
    border-left-color: #48bb78;
  }

  .activity-item[data-type="award"] {
    background-color: #fff8e1;
    border-left-color: #ed8936;
  }

  /* 深色主题下的活动样式 */
  .wujinghui-dashboard.dark-theme .activity-item {
    background: rgba(40, 40, 60, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .wujinghui-dashboard.dark-theme .activity-item[data-type="academic"] {
    background-color: rgba(102, 126, 234, 0.2);
  }

  .wujinghui-dashboard.dark-theme .activity-item[data-type="project"] {
    background-color: rgba(72, 187, 120, 0.2);
  }

  .wujinghui-dashboard.dark-theme .activity-item[data-type="award"] {
    background-color: rgba(237, 137, 54, 0.2);
  }

  .activity-item:hover {
    transform: translateX(8px) translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  }

  /* 为活动添加小图标装饰 */
  .activity-item::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .activity-item:hover::before {
    opacity: 1;
  }

  .activity-content {
    flex: 1;
  }

  .activity-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #333 0%, #666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .wujinghui-dashboard.dark-theme .activity-title {
    color: #e0e0e0;
    background: linear-gradient(135deg, #e0e0e0 0%, #b0b0b0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .activity-time {
    font-size: 13px;
    color: #666;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
  }

  .wujinghui-dashboard.dark-theme .activity-time {
    color: #a0a0a0;
    background: rgba(255, 255, 255, 0.1);
  }

  /* 活动编辑 */
  .activity-edit-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .activity-edit-item {
    background: rgba(240, 240, 240, 0.6);
    border-radius: 12px;
    padding: 16px;
  }

  .wujinghui-dashboard.dark-theme .activity-edit-item {
    background: rgba(40, 40, 60, 0.6);
  }

  /* 项目与技能模块 - 使用fixed定位完全覆盖左侧紫色区域 */
  .projects-skills-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    position: relative;
    background: white; /* 白色背景确保文字可见 */
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    min-height: 550px;
    overflow: visible;
    /* 直接覆盖整个容器区域 */
    width: 100%;
  }

  /* 移除左侧白色背景覆盖，避免挡住侧边栏内容 */

  /* 响应式设计 */
  @media (max-width: 1200px) {
    .projects-skills-section {
      grid-template-columns: 1fr;
      min-height: 600px;
    }

    .projects-skills-section::before {
      display: none;
    }
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .add-btn {
    color: #667eea;
    font-size: 14px;
    font-weight: 500;
  }

  .wujinghui-dashboard.dark-theme .add-btn {
    color: #8ea3e9;
  }

  /* 项目展示区 */
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
  }

  .project-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    background: white;
    border: 1px solid #e0e0e0;
  }

  .wujinghui-dashboard.dark-theme .project-card {
    border-color: #4a4a6a;
    background: rgba(30, 30, 47, 0.95);
  }

  /* 为不同类型的项目设置不同的顶部边框颜色和背景效果 */
  .project-card[data-type="practice"] {
    border-top: 5px solid #667eea;
    background: linear-gradient(to bottom, #f8f9ff 0%, white 100%);
  }

  .project-card[data-type="research"] {
    border-top: 5px solid #48bb78;
    background: linear-gradient(to bottom, #f0fff4 0%, white 100%);
  }

  .project-card[data-type="competition"] {
    border-top: 5px solid #ed8936;
    background: linear-gradient(to bottom, #fff8e1 0%, white 100%);
  }

  /* 深色主题下的项目卡片 */
  .wujinghui-dashboard.dark-theme .project-card[data-type="practice"] {
    background: linear-gradient(to bottom, rgba(102, 126, 234, 0.15) 0%, rgba(30, 30, 47, 0.95) 100%);
  }

  .wujinghui-dashboard.dark-theme .project-card[data-type="research"] {
    background: linear-gradient(to bottom, rgba(72, 187, 120, 0.15) 0%, rgba(30, 30, 47, 0.95) 100%);
  }

  .wujinghui-dashboard.dark-theme .project-card[data-type="competition"] {
    background: linear-gradient(to bottom, rgba(237, 137, 54, 0.15) 0%, rgba(30, 30, 47, 0.95) 100%);
  }

  .project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  }

  /* 项目卡片悬停时的发光效果 */
  .project-card[data-type="practice"]:hover {
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.2);
  }

  .project-card[data-type="research"]:hover {
    box-shadow: 0 12px 32px rgba(72, 187, 120, 0.2);
  }

  .project-card[data-type="competition"]:hover {
    box-shadow: 0 12px 32px rgba(237, 137, 54, 0.2);
  }

  .project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .project-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .wujinghui-dashboard.dark-theme .project-title {
    color: #e0e0e0;
  }

  .project-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    color: #666;
    font-size: 14px;
  }

  .wujinghui-dashboard.dark-theme .project-meta {
    color: #a0a0a0;
  }

  .project-date {
    font-weight: 500;
  }

  .project-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .wujinghui-dashboard.dark-theme .project-description {
    color: #a0a0a0;
  }

  .project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 项目编辑 */
  .projects-edit-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .project-edit-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .wujinghui-dashboard.dark-theme .project-edit-item {
    background: rgba(40, 40, 60, 0.8);
  }

  .tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
  }

  .tag-input {
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
    min-width: 100px;
    background: transparent;
    font-size: 14px;
  }

  .wujinghui-dashboard.dark-theme .tag-input {
    border-color: #666;
    color: #e0e0e0;
  }

  /* 技能展示区 */
  .skills-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .skill-item {
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    border-left: 4px solid #667eea;
    background: #f8f9ff;
  }

  /* 为不同的技能项设置不同的左侧边框颜色和背景色 */
  .skill-item:nth-child(3n+1) {
    border-left-color: #667eea;
    background-color: #f8f9ff;
  }

  .skill-item:nth-child(3n+2) {
    border-left-color: #48bb78;
    background-color: #f0fff4;
  }

  .skill-item:nth-child(3n) {
    border-left-color: #ed8936;
    background-color: #fff8e1;
  }

  .wujinghui-dashboard.dark-theme .skill-item:nth-child(3n+1) {
    background-color: rgba(102, 126, 234, 0.15);
    border-left-color: #667eea;
  }

  .wujinghui-dashboard.dark-theme .skill-item:nth-child(3n+2) {
    background-color: rgba(72, 187, 120, 0.15);
    border-left-color: #48bb78;
  }

  .wujinghui-dashboard.dark-theme .skill-item:nth-child(3n) {
    background-color: rgba(237, 137, 54, 0.15);
    border-left-color: #ed8936;
  }

  .skill-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .skill-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .wujinghui-dashboard.dark-theme .skill-name {
    color: #e0e0e0;
  }

  .skill-progress {
    margin-bottom: 8px;
  }

  .skill-level {
    font-size: 12px;
    color: #666;
    text-align: right;
    margin-bottom: 12px;
  }

  .wujinghui-dashboard.dark-theme .skill-level {
    color: #a0a0a0;
  }

  .skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* 技能编辑 */
  .skills-edit-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .skill-edit-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .wujinghui-dashboard.dark-theme .skill-edit-item {
    background: rgba(40, 40, 60, 0.8);
  }

  .skill-level-slider {
    margin-bottom: 16px;
  }

  .skill-level-value {
    text-align: center;
    font-weight: 500;
    color: #667eea;
    margin-top: 8px;
  }

  .wujinghui-dashboard.dark-theme .skill-level-value {
    color: #8ea3e9;
  }

  .skill-tags-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
  }

  /* 成就展示区 */
  .achievements-panel {
    margin-bottom: 24px;
    position: relative;
    background: white; /* 白色背景确保文字可见 */
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    min-height: 450px;
    overflow: visible;
    width: 100%;
  }

  .achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }

  .achievement-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 12px;
    border-left: 4px solid #667eea;
    transition: all 0.3s ease;
  }

  .achievement-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  /* 为不同的成就项设置不同的左侧边框颜色 */
  .achievement-item:nth-child(3n+1) {
    border-left-color: #667eea;
    background: #f8f9ff;
  }

  .achievement-item:nth-child(3n+2) {
    border-left-color: #48bb78;
    background: #f0fff4;
  }

  .achievement-item:nth-child(3n) {
    border-left-color: #ed8936;
    background: #fff8e1;
  }

  /* 深色主题下的成就样式 */
  .wujinghui-dashboard.dark-theme .achievement-item:nth-child(3n+1) {
    background: rgba(102, 126, 234, 0.15);
    border-left-color: #667eea;
  }

  .wujinghui-dashboard.dark-theme .achievement-item:nth-child(3n+2) {
    background: rgba(72, 187, 120, 0.15);
    border-left-color: #48bb78;
  }

  .wujinghui-dashboard.dark-theme .achievement-item:nth-child(3n) {
    background: rgba(237, 137, 54, 0.15);
    border-left-color: #ed8936;
  }

  .achievement-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    flex-shrink: 0;
  }

  .achievement-icon.gold-icon {
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    color: #fff;
  }

  .achievement-icon.silver-icon {
    background: linear-gradient(135deg, #c0c0c0 0%, #a9a9a9 100%);
    color: #fff;
  }

  .achievement-icon.bronze-icon {
    background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
    color: #fff;
  }

  .achievement-content {
    flex: 1;
  }

  .achievement-content h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }

  .wujinghui-dashboard.dark-theme .achievement-content h4 {
    color: #e0e0e0;
  }

  .achievement-detail {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .wujinghui-dashboard.dark-theme .achievement-detail {
    color: #a0a0a0;
  }

  .achievement-date {
    font-size: 12px;
    color: #999;
  }

  .wujinghui-dashboard.dark-theme .achievement-date {
    color: #888;
  }

  /* 移除左侧白色背景覆盖，避免挡住侧边栏内容 */

  /* 响应式调整成就区域 */
  @media (max-width: 1200px) {
    .achievements-panel {
      min-height: 500px;
    }

    .achievements-panel::before {
      display: none;
    }
  }

  .achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }

  .achievement-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: rgba(240, 240, 240, 0.6);
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  .wujinghui-dashboard.dark-theme .achievement-item {
    background: rgba(40, 40, 60, 0.6);
  }

  .achievement-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  .achievement-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    flex-shrink: 0;
  }

  .achievement-icon.gold-icon {
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    color: #8b7213;
  }

  .achievement-icon.silver-icon {
    background: linear-gradient(135deg, #c0c0c0 0%, #a9a9a9 100%);
    color: #696969;
  }

  .achievement-icon.bronze-icon {
    background: linear-gradient(135deg, #cd7f32 0%, #a86028 100%);
    color: #ffffff;
  }

  .achievement-content {
    flex: 1;
  }

  .achievement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .achievement-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .wujinghui-dashboard.dark-theme .achievement-title {
    color: #e0e0e0;
  }

  .achievement-date {
    font-size: 12px;
    color: #666;
  }

  .wujinghui-dashboard.dark-theme .achievement-date {
    color: #a0a0a0;
  }

  .achievement-detail {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }

  .wujinghui-dashboard.dark-theme .achievement-detail {
    color: #a0a0a0;
  }

  /* 成就编辑 */
  .achievements-edit-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .achievement-edit-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .wujinghui-dashboard.dark-theme .achievement-edit-item {
    background: rgba(40, 40, 60, 0.8);
  }

  /* 编辑状态提示 */
  .edit-status {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  /* 过渡动画 */
  .fade-transform-enter-active, .fade-transform-leave-active {
    transition: all 0.3s ease;
  }

  .fade-transform-enter-from {
    opacity: 0;
    transform: translateY(-20px);
  }

  .fade-transform-leave-to {
    opacity: 0;
    transform: translateY(20px);
  }

  /* 响应式设计 */
  @media (max-width: 1200px) {
    .projects-skills-section {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 1024px) {
    .wujinghui-dashboard {
      flex-direction: column;
    }

    .sidebar {
      width: 100%;
    }

    .profile-activity-row {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .projects-skills-section {
      grid-template-columns: 1fr;
    }

    .custom-header {
      flex-direction: column;
      gap: 16px;
      text-align: center;
    }

    .header-left, .header-right {
      justify-content: center;
    }

    .stats-cards {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .profile-main {
      flex-direction: column;
      text-align: center;
    }

    .projects-grid {
      grid-template-columns: 1fr;
    }

    .achievements-grid {
      grid-template-columns: 1fr;
    }

    .achievement-item {
      flex-direction: column;
      text-align: center;
    }
  }

  @media (max-width: 480px) {
    .stats-edit-grid {
      grid-template-columns: 1fr;
    }

    .header-actions {
      flex-direction: column;
      align-items: flex-start;
    }

    .panel-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }

  /* 仅针对当前页面的容器样式 - 不影响其他页面 */
  .wujinghui-dashboard.app-container {
    background: white;
  }

  /* 仅针对当前页面的侧边栏样式 */
  .wujinghui-dashboard .sidebar {
    background: transparent !important;
  }
</style>
